<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环球鞋网</title>
    <link rel="shortcut icon" href="logo.ico">
    <link rel="stylesheet" href="libs/bootstrap-4/css/bootstrap.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <script src="libs/jquery.min.js"></script>
    <script src="libs/bootstrap-4/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!--头部开始-->
    <header>
        <nav class="navbar navbar-expand-lg navbar-light">
            <h1 class="navbar-brand main-title" href="index.html">环球鞋网</h1>
            <button class="navbar-toggler navbar-button" type="button" data-toggle="collapse"
                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <h2 class="nav-link">
                            <a href="index.html">首页</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="category.html?cid=1">限时秒杀</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="category.html?cid=2">捕头严选</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="category.html?cid=3">优选爆款</a>
                        </h2>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item dropdown">
                            <h2 class="nav-link dropdown-toggle private-information" href="#" id="navbarDropdown"
                                role="button" data-toggle="dropdown" aria-expanded="false">
                                个人中心
                            </h2>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="myorder.html">我的订单</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="car.html">购物车</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">收藏商品</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="information.html">用户信息</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <h2 class="nav-link">
                                <a href="backstage_login.html">商家后台</a>
                            </h2>
                        </li>
                        <li class="nav-item">
                            <h2 class="nav-link">
                                <a href="#">联系客服</a>
                            </h2>
                        </li>
                        </li>
                    </ul>
                </form>
            </div>
        </nav>
        <!--头部结束-->
    </header>
    <!--标志和搜索框开始-->
    <div class="container px-0">
        <div class="row header-two">
            <div class="logo h-100 col-auto">
                <img src="images/logo.png" class="img-fluid">
            </div>
            <div class="search">
                <form method="post" action="#"  onclick="return false">
                    <input type="text" placeholder="请输入你想查询的商品名"  id="SearchInput" name="keyWord">
                    <button type="submit">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-sousuotubiao"></use>
                        </svg>
                    </button>
                </form>
            </div>
            <div></div>
        </div>
    </div>
    <!--标志于搜索框结束-->
    <!--分类导航开始-->
    <div id="navWrap" class="w-100">
        <!--版心元素-->
        <div class="navWrapMain container">
            <div class="row">
                <a href="javascript:;" class="col-auto">
                    <span class="pr-5">全部分类</span>
                    <span class="iconfont icon-xiala pl-1 mr-2"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="container d-none d-xl-block">
        <div class="float-left">
            <ul class="nav-left container">
                <li><a href="category.html?cid=4">Nike专场</a></li>
                <li><a href="category.html?cid=5">新百伦领跑</a></li>
                <li><a href="category.html?cid=6">PUMA彪马</a></li>
                <li><a href="category.html?cid=7">Adidas阿迪达斯</a></li>
                <li><a href="category.html?cid=8">Vans范斯</a></li>
                <li><a href="category.html?cid=9">CONVERSE匡威</a></li>
                <li><a href="category.html?cid=10">AJ乔丹</a></li>
                <li><a href="category.html?cid=11">ANTA安踏</a></li>
                <li><a href="category.html?cid=12">LI-NING李宁</a></li>
                <li><a href="category.html?cid=13">Fila斐乐</a></li>
            </ul>
        </div>
        <div class="float-right">
            <div class="nav-right container">
                <!--用户信息区域-->
                <div id="user">
                    <div id="userImformation" class="mt-4">
                        <div id="userImg">
                            <a href="login.html"><img id="userImage" src="images/用户照片.png"></a>
                        </div>
                        <div id="sessionChange">
                            <div id="defaultWelcome">Hi,欢迎来到环球鞋网
                                <div class="defaultWelcome-text">
                                    <span>你好，请先</span>
                                    <a href="login.html">登录</a>
                                    <a href="regist.html">我要注册</a>
                                </div>
                            </div>
                        </div>
                        <div id="userAdvertise">
                            <div class="d-flex justify-content-center"><button id="userButton1">限时新人优惠</button></div>
                            <div class="d-flex justify-content-center"><button id="userButton2">开通super尊享特权</button>
                            </div>
                        </div>
                        <div class="nav-right-myorder-box">
                            <div class="nav-right-myorder d-flex mt-4">
                                <div class="col-6">
                                    <div class="myorder-number">
                                        <i class="iconfont icon-daifukuan01"></i>
                                        <em id="notPayment">0</em>
                                    </div>
                                    <div class="myorder-text">
                                        <span>待付款</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="myorder-number">
                                        <i class="iconfont icon-daifahuo1
                                        "></i>
                                        <em id="notDeliver">0</em>
                                    </div>
                                    <div class="myorder-text">
                                        <span>待发货</span>
                                    </div>
                                </div>
                            </div>
                            <div class="nav-right-myorder d-flex mt-4">
                                <div class="col-6">
                                    <div class="myorder-number">
                                        <i class="iconfont icon-daifahuo"></i>
                                        <em id="notReceiptt">0</em>
                                    </div>
                                    <div class="myorder-text">
                                        <span>待收货</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="myorder-number">
                                        <i class="iconfont icon-yiwancheng
                                        "></i>
                                        <em id="finished">0</em>
                                    </div>
                                    <div class="myorder-text">
                                        <span>已完成</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--分类导航结束-->

    <!--导航开始-->
    <div>
        <div>
            <div class="banner-wrap">
                <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleFade" data-slide-to="1"></li>
                        <li data-target="#carouselExampleFade" data-slide-to="2"></li>
                        <li data-target="#carouselExampleFade" data-slide-to="3"></li>
                        <li data-target="#carouselExampleFade" data-slide-to="4"></li>
                    </ol>
                    <div class="carousel-inner" id="mainContainer">
                    </div>
                    <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade"
                        data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-target="#carouselExampleFade"
                        data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--导航结束-->
    <!--限时秒杀开始-->
    <div class="container">
        <div class="navleft-target big-title">
            限时秒杀
        </div>
    </div>
    <div class="container seckill px-0">
        <div class="row position-absolute">
            <div class="seckill-list">
                <div class="seckill-main">
                    <!-- 左侧按钮 -->
                    <a href="javascript:;" class="arrow_1"></a>
                    <!-- 右侧按钮 -->
                    <a href="javascript:;" class="arrow_2"></a>
                    <!-- 核心滚动区域 -->
                    <ul class="d-flex" id="killingContainer">
                    </ul>
                    <!-- 小圆圈 -->
                    <ol class="circle">
                        <li index="0" class="current"></li>
                        <li index="1"></li>
                        <li index="2"></li>
                    </ol>
                </div>
            </div>
            <div class="seckill-countdown">
                <div class="countdown-title">好鞋限时秒杀</div>
                <div class="countdown-desc">
                    <strong style="font-weight: 700;">限时折扣仅剩</strong>
                </div>
                <div class="timmer">
                    <span class="timmer-unit timmer-hour">06</span>
                    <span class="timmer-unit timmer-minute">40</span>
                    <span class="timmer-unit timmer-second">22</span>
                </div>
            </div>
        </div>
    </div>
    <!--限时秒杀结束-->
    <!-- 捕头严选开始 -->
    <div class="container" >
        <div class="big-title">
            捕头严选
        </div>
    </div>
    <div class="container ml-10" >
        <div class="card-deck h-50 mt-4 row" id="selectedContainer">
            <div class="ml-0 col-xl-3 col-lg-4 col-md-6 col-sm-6 px-0">
                <div class="card">
                    <img src="images/p_0001.jpg" class="card-img-top " alt="...">
                    <div class="card-body">
                        <h1 class="card-title">罗技鼠标</h1>
                        <h2 class="card-title text-danger">￥200</h2>
                        <p class="card-text">打算扩大就是打开拉萨建档立卡觉得垃圾的撒旦记录卡撒打算空间撒赖可见度</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">
                            <a href="">添加购物车</a>
                            <a href="">点击收藏</a>
                        </small>
                    </div>
                </div>
            </div>
            <div class="ml-0 col-xl-3 col-lg-4 col-md-6 col-sm-6 px-0">
                <div class="card px-0">
                    <img src="./images/items.webp" class="card-img-top " alt="...">
                    <div class="card-body">
                        <h1 class="card-title">罗技鼠标</h1>
                        <h2 class="card-title text-danger">￥200</h2>
                        <p class="card-text">打算扩大就是打开拉萨建档立卡觉得垃圾的撒旦记录卡撒打算空间撒赖可见度</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">
                            <a href="">添加购物车</a>
                            <a href="">点击收藏</a>
                        </small>
                    </div>
                </div>
            </div>
            <div class="ml-0 col-xl-3 col-lg-4 col-md-6 col-sm-6 px-0">
                <div class="card px-0">
                    <img src="./images/items.webp" class="card-img-top " alt="...">
                    <div class="card-body">
                        <h1 class="card-title">罗技鼠标</h1>
                        <h2 class="card-title text-danger">￥200</h2>
                        <p class="card-text">打算扩大就是打开拉萨建档立卡觉得垃圾的撒旦记录卡撒打算空间撒赖可见度</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">
                            <a href="">添加购物车</a>
                            <a href="">点击收藏</a>
                        </small>
                    </div>
                </div>
            </div>
            <div class="ml-0 col-xl-3 col-lg-4 col-md-6 col-sm-6 px-0">
                <div class="card px-0">
                    <img src="./images/items.webp" class="card-img-top " alt="...">
                    <div class="card-body">
                        <h1 class="card-title">罗技鼠标</h1>
                        <h2 class="card-title text-danger">￥200</h2>
                        <p class="card-text">打算扩大就是打开拉萨建档立卡觉得垃圾的撒旦记录卡撒打算空间撒赖可见度</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">
                            <a href="">添加购物车</a>
                            <a href="">点击收藏</a>
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 捕头严选结束 -->
    <!-- 优选爆款开始 -->
    <div class="container">
        <div class="big-title">
            优选爆款
        </div>
    </div>
    <!-- 优选爆款结束 -->
    <div class="container ml-10">
        <div class="card-deck h-50 mt-4 row"  id="recommendContainer">
        </div>
    </div>
    <!--固定右侧导航栏开始-->
    <div class="toolbar-wrap">
        <div class="toolbar">
            <div class="toolbar-top">
                <a href="information.html">
                    <div class="toolbar-item m-mine">
                        <span class="iconfont icon-31wode"></span>
                        <span class="tool-text">我的</span>
                    </div>
                </a>
                <div class="toolbar-item m-msg">
                    <span class="iconfont icon-xiaoxitongzhi"></span>
                    <span class="tool-text">通知</span>
                </div>
                <div class="toolbar-item m-cart">
                    <a href="car.html">
                        <span class="iconfont icon-gouwuchekong"></span>
                        <span class="tool-text">购物车</span>
                    </a>
                </div>
                <a  href="myorder.html">
                <div class="toolbar-item m-store">
                    <span class="iconfont icon-wodedingdan"></span>
                    <span class="tool-text">订单</span>
                </div>
                </a>
                <div class="toolbar-item m-service">
                    <span class="iconfont icon-kefu"></span>
                    <span class="tool-text">客服</span>
                </div>
            </div>
            <div class="return-top">
                <i class="iconfont icon-4fanhuidingbubai"></i>
            </div>
        </div>
    </div>
    <!--固定右侧导航栏结束-->
</body>
<script src="fonts/iconfont.js"></script>
<script src="js/index.js"></script>
</html>